<template>
  <basic-card :title="$t('menu.task_broadcast_add')" :iconClass="'iconfont icon-broadcast'">

    <el-row :gutter="20" style="margin-top: 30px">
      <el-col :span="12">
        <el-card>
          <el-header>任务属性</el-header>
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="播放周期">
              <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
              <div style="margin: 15px 0;"></div>
              <el-checkbox-group v-model="checkedWeeks" @change="handleCheckedWeeksChange">
                <el-checkbox v-for="week in weeks" :label="week" :key="week">{{week}}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="播放模式">
                <el-radio v-model="radio" label="1">列表播放</el-radio>
                <el-radio v-model="radio" label="2">循环播放</el-radio>
            </el-form-item>

            <el-form-item label="播放时间">
              <el-radio v-model="radio" label="1">全天</el-radio> 或者
              <el-form-item>
              <el-time-select
                  placeholder="起始时间"
                  v-model="startTime"
                  :picker-options="{start: '08:30',step: '00:15',end: '18:30'}">
                </el-time-select>-
                <el-time-select
                  placeholder="结束时间"
                  v-model="endTime"
                  :picker-options="{start: '08:30',step: '00:15',end: '18:30',minTime: startTime}">
                </el-time-select>
              </el-form-item>
            </el-form-item>
              <el-header>任务文件</el-header>
            <el-form-item class="">
              在右侧【文件列表】中选择的文件显示在这里
            </el-form-item>
            <el-form-item class="text-right">
              <el-button type="success" @click="">
                {{ $t("botton.create") }}
              </el-button>
              <el-button type="info" @click="">
                {{ $t("botton.reset") }}
              </el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <el-header>文件列表<small>「选择音乐加入播放任务」</small></el-header>
          <div class="grid-content">
            <basic-table
              :pageMethod="$mainApi.broadcastFileApi.getBroadcastFileByPage"
              :tableForm="tableForm"
            >
              <!-- id: Math.random(),
                      name: "广播文件名称",
                      path: "/root/etc",
                      suffix: "txt",
                      type: "文件" -->
              <template #table-column>
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column
                  prop="name"
                  :label="$t('broadcast.name')"
                >
                  <template slot-scope="scope">
                    <el-button
                      type="text"
                      @click="showDevicesDocsFormDialop(scope.row.id, scope.row)"
                    >{{ scope.row.name }}</el-button
                    >
                  </template>
                </el-table-column>
                <el-table-column
                  prop="path"
                  :label="$t('broadcast.path')"
                ></el-table-column>
                <el-table-column
                  prop="suffix"
                  :label="$t('broadcast.suffix')"
                ></el-table-column>
                <el-table-column
                  prop="type"
                  :label="$t('broadcast.type')"
                ></el-table-column>

                <!--                   <el-table-column prop="goodsDescribe" :label="$t('commodity.description')"></el-table-column> -->
              </template>

              <template #others-elements="basicTable">
                <basic-delete-dialop
                  ref="DeleteDialop"
                  @confirm="(list) => deleteData(list, basicTable.table.refresh)"
                />
              </template>
            </basic-table>

            <el-form ref="form" :inline="true" size="small" class="text-right">

              <el-button type="success" @click="">
                {{ $t("botton.task_add") }}
              </el-button>
            </el-form>
          </div>
        </el-card>
      </el-col>

<!--      <el-col :span="12">-->
<!--        <div class="grid-content">-->
<!--        <el-card>-->
<!--        </el-card>-->
<!--        </div>-->
<!--      </el-col>-->
    </el-row>


  </basic-card>
</template>
<script lang="ts">
import Vue from "vue";
import BasicCard from "@/components/Basic/Card/BasicCard.vue";
import BasicTable from "@/components/Basic/Table/BasicTable.vue";
import BasicDeleteDialop from "@/components/Basic/Dialop/BasicDeleteDialop.vue";

export default Vue.extend({
  components: { BasicCard, BasicTable, BasicDeleteDialop },
  data() {
    const weekOptions = ['周一', '周二', '周三', '周四', '周五', '周六', '周日', '工作日'];
    return {
      tableForm: {
        search: ""
      },
      tableData: [{
        name: '每日播放任务',
        date: '2020-05-02',
      }, {
        name: '任务一',
        date: '2020-05-02',
      }, {
        name: '任务一',
        date: '2020-05-02',
      }, {
        name: '任务一',
        date: '2020-05-02',
      }],
      checkAll: false,
      checkedWeeks: ['周一', '周二'],
      weeks: weekOptions,
      isIndeterminate: true,
      startTime: '',
      endTime: ''
    }
  },
  methods: {
    showDeleteDialop(selectRows: Array<any>) {
      if (selectRows.length < 1) {
        this.$message.warning(`${this.$t("message.plase_select", { target: this.$t('menu.broadcast_list') })}`);
      }
      const deleteList: Array<any> = [];
      selectRows.forEach((selected: any) => {
        deleteList.push({
          id: selected.id,
          label: selected.title
        });
      });
      (this.$refs.DeleteDialop as any).init(deleteList);
    },
    deleteData(list: Array<any>, refresh: Function) {
      const allPromise: Array<any> = [];

      list.forEach((item) => {
        allPromise.push(this.$mainApi.devicesDocsApi.deleteDevicesDocsById(item.id));
      });

      Promise.all(allPromise).then(() => {
        refresh();
      });
    },

    handleCheckAllChange(val: any) {
      this.checkedWeeks = val ? this.weeks : [];
      this.isIndeterminate = false;
    },
    handleCheckedWeeksChange(value: any) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.weeks.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.weeks.length;
    }

  }
});
</script>
<style lang="scss" scoped>
</style>
